<template>
  <!-- 订阅监听对话框 -->
  <el-dialog title="订阅监听" :model-value="subscribeDialog.visible" @update:model-value="(val) => emit('update:subscribeDialog', { ...subscribeDialog, visible: val })" width="1000px" append-to-body>
    <div style="margin-bottom: 20px;">
      <el-button type="primary" @click="handleStartSubscribe" :disabled="subscribing">开始订阅</el-button>
      <el-button type="danger" @click="handleStopSubscribe" :disabled="!subscribing">停止订阅</el-button>
      <el-button @click="handleClearMessages">清空消息</el-button>
      <span style="margin-left: 20px;">订阅状态：
        <el-tag :type="subscribing ? 'success' : 'info'" size="small">
          {{ subscribing ? '监听中' : '未订阅' }}
        </el-tag>
      </span>
    </div>
    <el-form label-width="120px">
      <el-form-item label="订阅主题">
        <el-input v-model="subscribeForm.topicName" placeholder="请输入主题名称" readonly />
      </el-form-item>
      <el-form-item label="QoS等级">
        <el-select v-model="subscribeForm.qos" placeholder="请选择QoS等级" style="width: 200px">
          <el-option label="QoS 0" value="0" />
          <el-option label="QoS 1" value="1" />
          <el-option label="QoS 2" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="消息列表">
        <div class="message-list">
          <div v-for="(msg, index) in receivedMessages" :key="index" class="message-item">
            <div class="message-header">
              <span class="message-time">{{ msg.timestamp }}</span>
              <el-tag size="small" :type="getQosTag(msg.qos)">QoS {{ msg.qos }}</el-tag>
              <el-tag v-if="msg.retain" size="small" type="warning">保留</el-tag>
            </div>
            <div class="message-content">{{ msg.payload }}</div>
          </div>
          <div v-if="receivedMessages.length === 0" class="no-messages">
            暂无消息
          </div>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
// Props
interface Props {
  subscribeDialog: {
    visible: boolean
  }
  subscribeForm: {
    topicName: string
    qos: string
  }
  subscribing: boolean
  receivedMessages: any[]
  getQosTag: (qos: string) => string
}

const props = defineProps<Props>()

// Emits
const emit = defineEmits(['update:subscribeDialog', 'update:subscribeForm', 'startSubscribe', 'stopSubscribe', 'clearMessages'])

// 处理开始订阅
const handleStartSubscribe = () => {
  emit('startSubscribe')
}

// 处理停止订阅
const handleStopSubscribe = () => {
  emit('stopSubscribe')
}

// 处理清空消息
const handleClearMessages = () => {
  emit('clearMessages')
}
</script>

<style scoped>
.message-list {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 10px;
}

.message-item {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.message-item:last-child {
  margin-bottom: 0;
}

.message-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.message-time {
  font-size: 12px;
  color: #909399;
}

.message-content {
  font-family: 'Courier New', monospace;
  background-color: #fff;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  white-space: pre-wrap;
  word-break: break-all;
}

.no-messages {
  text-align: center;
  color: #909399;
  padding: 20px;
}
</style>